<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/webjars/jquery/3.1.1/jquery.js"></script>
    <script src="/js/sweetAlert.js"></script>

</head>
<body>

    <div  id="main" style="width: 500px;height: 300px;background-color: pink">

    </div>


    <script src="/js/echarts.min.js"></script>

    <script type="text/javascript">
        // 直接页面写的调用ajax的方法
        function callbackFn(myChart,jsonURL){
            $.ajax({
                url:jsonURL,
                dataType:"json",
                success:function(jsonData){

                    myChart.setOption({
                        title:{
                            text:jsonData["title"]
                        },
                        xAxis: {
                            data: jsonData.categories
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '点击量',
                            data: jsonData.data
                        }]
                    });
                    // 设置加载等待隐藏
                    myChart.hideLoading();
                }
            });
        }
        // 初始化echar报表的方法
        function initReport(myChart){

            // 显示标题，图例和空的坐标轴
            myChart.setOption({

                tooltip: {},
                legend: {
                    data:['点击量']
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [{
                    name: '点击量',
                    type: 'bar',
                    data: []
                }]
            });
        }

        function createTestReport(showDivId,jsonURL){
            var myChart = echarts.init(document.getElementById(showDivId));
            // 初始化report对象
            initReport(myChart);
            myChart.showLoading({text: '正在努力的读取数据中...'  });
            // 调用后台获取json数据
            callbackFn(myChart,jsonURL);
        }
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            var showDivId = 'main';
            var jsonURL = "/history/dataAnalysis?videoId=1";
            createTestReport(showDivId,jsonURL);
        });
    </script>
</body>
</html>